﻿<h1>Validation, Pattern Match</h1>
This example explains how to configure validation pattern for the text fields. Field urlTextBox relies on the default error messages, which are different for required field and pattern match checks. Field emailTextBox uses the custom one, which is the same for all validation scenarios. Field ipAddressTextBox is not marked as required, and relies only on the pattern.<br>
<button id="ValidationPatternMatchExample" class="try-example-button">Try Example</button>
<h2>UI Model</h2>
<div style="color:Black;background-color:White;"><pre>{
    <span style="color:#A31515;">"windows"</span>: [
        {
            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"PatternValidationExample"</span>,
            <span style="color:#A31515;">"title"</span>: <span style="color:#A31515;">"Pattern Validation Example"</span>,
            <span style="color:#A31515;">"left"</span>: 500,
            <span style="color:#A31515;">"top"</span>: 100,
            <span style="color:#A31515;">"width"</span>: 400,
            <span style="color:#A31515;">"height"</span>: 300,
            <span style="color:#A31515;">"controls"</span>: [
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"urlTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Url"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"url"</span>,
                    <span style="color:#A31515;">"isRequired"</span>: <span style="color:Blue;">true</span>,
                    <b><span style="color:#A31515;">"pattern"</span>: <span style="color:#A31515;">"https?://.+"</span></b>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"emailTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Email"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"email"</span>,
                    <span style="color:#A31515;">"isRequired"</span>: <span style="color:Blue;">true</span>,
                    <b><span style="color:#A31515;">"pattern"</span>: <span style="color:#A31515;">".+@.+\\..+"</span>,
                    <span style="color:#A31515;">"validationErrorMessage"</span>: <span style="color:#A31515;">"Email was not provided or doesn't have a correct format"</span></b>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"ipAddressTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"IP Address"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"ipAddress"</span>,
                    <b><span style="color:#A31515;">"pattern"</span>: <span style="color:#A31515;">"\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}"</span></b>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"OKButton"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"button"</span>,
                    <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"OK"</span>,
                    <span style="color:#A31515;">"isDialogButton"</span>: <span style="color:Blue;">true</span>,
                    <span style="color:#A31515;">"dialogResult"</span>: <span style="color:#A31515;">"OK"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"CancelButton"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"button"</span>,
                    <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"Cancel"</span>,
                    <span style="color:#A31515;">"isDialogButton"</span>: <span style="color:Blue;">true</span>,
                    <span style="color:#A31515;">"dialogResult"</span>: <span style="color:#A31515;">"Cancel"</span>
                }
            ]
        }
    ]
}
</pre></div>
<h2>Data Model</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> siteData = {
	url: <span style="color:#A31515;">""</span>,
	email: <span style="color:#A31515;">""</span>,
	ipAddress: <span style="color:#A31515;">""</span>
};
</pre></div>
<h2>Code</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> exampleWindow = redui.createNewWindow(<span style="color:#A31515;">"PatternValidationExample"</span>);
exampleWindow.bind(siteData);
exampleWindow.show();
</pre>